<template>
	<div>
		<div class="left noScroll">
			<NewSection :type="10" imgType="comp" title="资源概况">
				<div class="left-top">
					<div class="left-top-count">
						<div class="left-top-count-item" v-for="(item,index) in countList" :key="index"
							@click.stop="topTitleClick(index)">
							<img :src="item.img">
							<div class="left-top-count-item-text">
								<div class="left-top-count-item-text-title">
									{{item.title}}
								</div>
								<div class="left-top-count-item-text-count">{{item.count}}</div>
							</div>
						</div>

						<!-- 园林弹框 -->
						<MyCollapse v-model="topTitleModal" :custom-style="{top: '80px',left: '0'}" position="absolute">
							<div class="left-top-modal">
								<div class="left-top-modal-title">
									<div class="left-top-modal-title-title">{{topTitleTab==0? "园林" : "古树"}}</div>
									<Select v-model="modalType" style="width:120px">
										<Option v-for="item in modalList" :value="item.id" :key="item.id">
											{{ item.name }}</Option>
									</Select>
								</div>

								<div class="left-top-modal-cont noScroll">
									<div class="left-top-modal-cont-garden" v-if="topTitleTab == 0">
										<div class="left-top-modal-cont-garden-title">
											<div>宝通东街(白浪河东桥头——北海路)</div>
											<div>绿化带</div>
										</div>
										<div class="left-top-modal-cont-garden-msg">
											<div>绿化面积4㎡</div>
											<div>数目数量53棵</div>
										</div>
										<div class="left-top-modal-cont-garden-name">
											榆树
										</div>
									</div>

									<div class="left-top-modal-cont-tree" v-if="topTitleTab == 1">
										<div class="left-top-modal-cont-tree-title">
											<div>圆柏</div>
											<div>珍惜名木</div>
										</div>
										<div class="left-top-modal-cont-tree-msg">
											<div>树龄 37年</div>
											<div>树径 0cm</div>
											<div>生长势 <span>强</span></div>
										</div>
										<div class="left-top-modal-cont-tree-place">
											山东省潍坊市奎文区胜利冻结东苑花园
										</div>
									</div>
								</div>
							</div>
						</MyCollapse>
					</div>

					<!-- 绿化率 8.2隐藏 -->
					<div class="left-top-percent">
						<div class="left-top-percent-percent">
							<div class="left-top-percent-percent-title">
								绿化率(城市绿化面积占比)
							</div>
							<div class="left-top-percent-percent-count">
								{{zygk_lvh_rate}}%
							</div>
						</div>

						<div class="left-top-percent-percent2">
							<Progress :percent="zygk_lvh_rate" hide-info :stroke-color="['#2191BD', '#01B8FC']" />
						</div>

						<div class="left-top-percent-area">
							<div class="left-top-percent-area-item">
								<div class="left-top-percent-area-item-title">
									绿化覆盖面积
								</div>
								<div class="left-top-percent-area-item-count">
									{{zygk_lhfgmj}}<span>km²</span>
								</div>
							</div>
							<div class="left-top-percent-area-item">
								<div class="left-top-percent-area-item-title">
									规划绿地面积
								</div>
								<div class="left-top-percent-area-item-count">
									{{zygk_ghldmj}}<span>km²</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</NewSection>

			<NewSection :type="10" imgType="comp" title="事件动态">
				<div class="left-bottom">
					<div class="left-bottom-status">
						<div class="left-bottom-status-item" :class="{'left-bottom-status-item-in':statusTab == index}"
							v-for="(item,index) in statusTabList" :key="index" @click.stop="statusTabClick(index)">
							<div class="left-bottom-status-item-title">{{item.title}}</div>
							<div class="left-bottom-status-item-count">{{item.count}}</div>
						</div>
					</div>
					<div class="left-bottom-msg" v-show="statusTab == 0 && msgList.length > 0">
						<div class="left-bottom-msg-item" v-for="(item,index) in msgList" :key="index" v-if="refresh">
							<div class="left-bottom-msg-item-time">{{item.time}}</div>
							<div class="left-bottom-msg-item-msg">
								{{item.people}}
								<span>上报问题</span>
								<span>{{item.issue}}</span>
							</div>
						</div>
					</div>
					<div v-show="statusTab != 0 || msgList.length == 0">
						<div class="left-bottom-img">
							<img src="../../../../assets/new/tree_no.png">
							<p>暂无数据</p>
						</div>
					</div>
				</div>
			</NewSection>
		</div>

		<!-- 点击园林绿地 名木古树 -->
		<Modal v-model="genDetailVisible" :mask="false" footer-hide 
			:z-index="600" width="392" :styles="{left:'420px',margin:'0',top: '110px'}"
			@on-visible-change="onChangeGenDetailVisible" v-click-outside="handlerCloseGenDetail">
			<div class="left-top-detail">
				<div class="left-top-green">
					<header>
					  <div class="left-top-person-name">
					  	{{topTitleTab == 0 ? '园林绿地' : '名木古树'}}
					  </div>
					  <Icon custom="i-icon ivu-icon-ios-close"
					        size="40"
					        class="cursor-pointer"
					        @click="genDetailVisible = false" />
					</header>
					<!-- 园林绿地 -->
					<section
						:class="{'left-top-section1':greenArr.length<7,'left-top-section2':greenArr.length>6}" v-if="topTitleTab == 0">
						<div class="left-top-green-item" v-for="(item,index) in greenArr" :key="index"
							@click.stop="onClickGenDetailItem('园林绿化',item.gardensName)">
							<img :src="green[item.gardensIcon]" class="left-top-green-item-img">
							<div class="left-center-txt">{{item.gardensName}}</div>
							<p>
								<span class="fs-22">{{item.num}}</span>
							</p>
						</div>
					</section>
					<!-- 名木古树 -->
					<section v-if="topTitleTab == 1">
						<div class="left-top-green-item" v-for="(item,index) in treeArr" :key="index"
							@click.stop="onClickGenDetailItem('名木古树',item.oldTreesName)">
							<img :src="tree[item.oldTreesIcon]" class="left-top-green-item-img">
							<div class="left-center-txt">{{item.oldTreesName}}</div>
							<p>
								<span class="fs-22">{{item.num}}</span>
							</p>
						</div>
					</section>
					<div class="left-top-person-footer"></div>
				</div>
			</div>
		</Modal>

		<!-- 8.2隐藏 -->
		<div class="right noScroll">
			<NewSection :type="9" imgType="tree" title="绿化情况">
				<div class="right-cont">
					<div class="right-cont-top">
						<div class="right-cont-top-item">
							<i-circle :percent="lhqk_ms_rate" :size="60" :trail-width="10" trail-color="#272c2f"
								:stroke-width="10" :stroke-color="['#4893C2','#53BAD7']">
								<Icon custom="i-icon icon-maosheng" size="28" color="#fff" class="right-title-icon" />
							</i-circle>
							<div class="flex-1 m-l-25 right-cont-top-item-txt">
								<p class="fs-14">长势(茂盛树木)</p>
								<div class="flex fs-18">
									<p class="flex-1">
										<span class="">{{lhqk_ms_rate}}</span>%
									</p>
									<p class="flex-1">
										<span class="">{{lhqk_ms}}</span>/<span class="">{{lhqk_total}}</span>
									</p>
								</div>
							</div>
						</div>
						<div class="right-cont-top-item">
							<i-circle :percent="lhqk_jk_rate" :size="60" :trail-width="10" trail-color="#272c2f"
								:stroke-width="10" :stroke-color="['#4893C2','#53BAD7']">
								<Icon custom="i-icon icon-changshi" size="28" color="#fff" class="right-title-icon" />
							</i-circle>
							<div class="flex-1 m-l-25 right-cont-top-item-txt">
								<p class="fs-14">健康(无病虫害)</p>
								<div class="flex fs-18">
									<p class="flex-1">
										<span class="">{{ lhqk_jk_rate }}</span>%
									</p>
									<p class="flex-1">
										<span class="">{{lhqk_jk}}</span>/<span class="">{{lhqk_total}}</span>
									</p>
								</div>
							</div>
						</div>
					</div>

					<div class="right-cont-line" v-if="false"></div>

					<div class="right-cont-record" v-if="false">
						<div class="right-cont-record-title">养护记录</div>
						<div class="noData">
							<img src="../../../../assets/main/blank_black.png" alt="">
							<p>暂无数据</p>
						</div>
					</div>
				</div>
			</NewSection>

			<!-- <MainSection icon="icon-zongheguanli_daichakan"
                   title="传感检测"
                   rightIcon
                   @onClickRightIcon='detectionClick'>
        <div class="right-bottom">
          <div class="right-bottom-detection">
            <div class="right-bottom-detection-item">
              <div class="right-bottom-detection-item-icon">
                <Icon custom="i-icon icon-turang"
                      size="36"
                      class="right-bottom-detection-item-icon-icon" />
                <div class="right-bottom-detection-item-icon-text">
                  <p>土壤检测点</p>
                  <span>{{cgjc_trjcd}}</span>
                </div>
              </div>
              <div class="right-cont-detection-item-line"></div>
              <div class="right-cont-detection-item-data">
                <p>正常</p>
                <span>{{cgjc_trjcd_ok}}</span>
              </div>
              <div class="right-cont-detection-item-data">
                <p>异常</p>
                <span>{{cgjc_trjcd_ng}}</span>
              </div>
            </div>

            <div class="right-bottom-detection-item">
              <div class="right-bottom-detection-item-icon">
                <Icon custom="i-icon icon-huanjing"
                      size="36"
                      class="right-bottom-detection-item-icon-icon" />
                <div class="right-bottom-detection-item-icon-text">
                  <p>环境检测点</p>
                  <span>{{cgjc_hjjcd}}</span>
                </div>
              </div>
              <div class="right-cont-detection-item-line"></div>
              <div class="right-cont-detection-item-data">
                <p>正常</p>
                <span>{{cgjc_hjjcd_ok}}</span>
              </div>
              <div class="right-cont-detection-item-data">
                <p>异常</p>
                <span>{{cgjc_hjjcd_ng}}</span>
              </div>
            </div>
          </div>
        </div>
      </MainSection> -->
		</div>
		<!-- 体感监测对话框 -->
		<div class="detection-model" v-show="detectionModel">
			<div class="detection-model-title">
				<div :class="{'detection-model-title-title-in' : detectionTitleTab == 0}"
					@click.stop="detectionTitleClick(0)">土壤监测</div>
				<div :class="{'detection-model-title-title-in' : detectionTitleTab == 1}"
					@click.stop="detectionTitleClick(1)">环境监测</div>
				<Icon custom="i-icon icon-guanbi" size="24" class="detection-model-title-icon"
					@click.stop="detectionCloseClick" />
			</div>
			<div class="detection-model-subtitle">
				<div :class="{'detection-model-subtitle-title-in' : detectionSubTitleTab == index}"
					@click.stop="detectionSubTitleClick(index)" v-for="(item,index) in detectionSubTitleList"
					:key="index">
					{{item.name}}
				</div>
			</div>
			<div class="detection-model-data">
				<div class="noData">
					<img src="../../../../assets/main/blank_black.png" alt="">
					<p>暂无数据</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import MainSection from '../template/MainSection';
	import NewSection from '../subject/NewSection';
	import MyCollapse from "../../../common/MyCollapse";
	import {
		mapActions
	} from 'vuex';
	import vClickOutside from 'v-click-outside'
	export default {
		components: {
			MainSection,
			NewSection,
			MyCollapse
		},
		directives: {
			clickOutside: vClickOutside.directive
		},
		data() {
			return {
				green: {
					'icon-qitalvhua': require('../../../../assets/new/new_shu_1.png'),
					'landscaping': require('../../../../assets/new/new_shu_1.png'),
					'icon-zonghegongyuan': require('../../../../assets/new/new_shu_2.png'),
					'icon-shequgongyuan': require('../../../../assets/new/new_shu_3.png'),
					'icon-koudaigongyuan': require('../../../../assets/new/new_shu_4.png'),
					'icon-lvhuadai': require('../../../../assets/new/new_shu_5.png'),
					'mapholecover17': require('../../../../assets/new/new_shu_5.png')
				},
				tree: {
					'icon-yuanlinlvdi': require('../../../../assets/new/new_tree_1.png'),
					'famoustrees': require('../../../../assets/new/new_tree_1.png'),
					'icon-zhenximingmu': require('../../../../assets/new/new_tree_1.png'),
					'icon-jinianmingmu': require('../../../../assets/new/new_tree_1.png')
				},
				refresh: true,
				zygk_lhfgmj: 0,
				zygk_ghldmj: 0,
				zygk_lvh_rate: 0,
				cgjc_hjjcd: 0,
				cgjc_hjjcd_ok: 0,
				cgjc_hjjcd_ng: 0,
				cgjc_trjcd: 0,
				cgjc_trjcd_ok: 0,
				cgjc_trjcd_ng: 0,
				lhqk_total: 0,
				lhqk_ms: 0,
				lhqk_ms_rate: 0,
				lhqk_jk: 0,
				lhqk_jk_rate: 0,
				topTitleModal: false,
				modalType: 1,
				modalList: [{
					id: 1,
					name: '全部'
				}, {
					id: 2,
					name: '绿化带'
				}, {
					id: 3,
					name: '社区公园'
				}, {
					id: 4,
					name: '环境监测一'
				}, {
					id: 5,
					name: '其他绿化'
				}, {
					id: 6,
					name: '综合公园'
				}],
				modalText: '全部',
				topTitleTab: 0,
				statusTab: 0,
				statusTabList: [{
						title: '巡查上报',
						count: '0',
						icon: 'icon-xunchashangbao'
					}
					// 8.2隐藏
					// , {
					//   title: '群众投诉',
					//   count: '0',
					//   icon: 'icon-qunzhongtousu'
					// }, {
					//   title: '树木倾倒',
					//   count: '0',
					//   icon: 'icon-shumuqingdao'
					// }
				],
				msgList: [],
				detectionModel: false,
				detectionTitleTab: 0,
				detectionSubTitleTab: 0,
				detectionSubTitleList: [{
					name: '全部'
				}, {
					name: '温度报警 (0)'
				}, {
					name: '湿度报警 (0)'
				}],
				genDetailVisible: false,
        lTime: new Date().getTime(),// 最后一次点击的时间
        cTime: new Date().getTime(),//当前时间
        timer: null,
			};
		},
    watch: {
      genDetailVisible(newVal){
        if (newVal) {
          this.timer = setInterval(() => {
            this.cTime = new Date().getTime();
            if ((this.cTime - this.lTime) > 15000) {
              this.genDetailVisible = false
            }
          }, 1000);
        } else {
          clearInterval(this.timer)
        }
      }
    },
		computed: {
			countList() {
				let data = this.$store.getters.getElementList
				let arr = [{
					img: require('../../../../assets/new/tree_left.png'),
					title: '园林绿地',
					count: data.totalNumGar
				}, {
					img: require('../../../../assets/new/tree_right.png'),
					title: '名木古树',
					count: data.totalNumTree
				}]
				return arr
			},
			greenArr() {
				return this.$store.getters.getElementList.gardensElementsList
			},
			treeArr() {
				return this.$store.getters.getElementList.oldTreesElementsList
			},
		},
		mounted() {
			this.init()
			this.modalText = this.modalList[0].name
		},
		created() {
			this.initData();
		},
		methods: {
			...mapActions([
				'updateElementList'
			]),
			initData() {
        bus.$on('onMouseDownPage', data => {
          this.lTime = data
        })
				this.$http.getGreenAreaMap({}).then((res) => {
					if (res.success) {
						let data = res.result;
						this.zygk_lhfgmj = data.greenarea;
						this.zygk_ghldmj = data.plangreenarea;
						this.zygk_lvh_rate = data.greeningRate
					} else {
						console.log("失败");
					}
				}).catch((e) => {
					console.log("异常");
				});

				this.$http.getSensorStatusMap({}).then((res) => {
					if (res.success) {
						let data = res.result;
					} else {
						console.log("失败");
					}
				}).catch((e) => {
					console.log("异常");
				});

				this.$http.getGreenStatusMap({}).then((res) => {
					if (res.code == 200) {
						let data = res.result
						this.lhqk_total = data.number
						this.lhqk_ms = data.growthsituation
						this.lhqk_ms_rate = data.growthsituationRate
						this.lhqk_jk = data.curingway
						this.lhqk_jk_rate = data.curingwayRate
					}
				})

				let d = new Date();
				let year = d.getFullYear();
				let month = (d.getMonth() + 1) > 10 ? (d.getMonth() + 1) : ("0" + (d.getMonth() + 1));
				let day = d.getDate() > 10 ? d.getDate() : "0" + d.getDate();
				this.$http.getPatrolCaseList({
					"date": year + "-" + month + "-" + day,
					"page": 1,
					"size": 8
				}).then((res) => {
					if (res.success) {
						let data = res.result;
						this.statusTabList[0].count = data.total;
						let cases = data.cases;
						this.msgList = [{
							time:'2021-11-20',
							people:'小曹',
							issue:'垃圾积攒过多'
						}];
						// for (let i = 0; i < cases.length; i++) {
						// 	let item = {};
						// 	item.time = cases[i].createTime.slice(11);
						// 	item.people = cases[i].createName;
						// 	item.issue = cases[i].caseIssueChildName;
						// 	this.msgList.push(item);
						// }
						this.refresh = false;
						this.$nextTick(() => {
							this.refresh = true;
						})
					} else {
						console.log("失败");
					}
				}).catch((e) => {
					console.log("异常");
				});
			},
			init() {
				this.updateElementList()
			},
			topTitleClick(i) {
				this.topTitleTab = i
				this.genDetailVisible = true
				// 2021年6月18日暂时隐藏
				// this.topTitleModal = true
        bus.$emit('hideSearch')
        bus.$emit('hideMapInfoWindow')
        bus.$emit('hideNavbar')
			},
			statusTabClick(i) {
				this.statusTab = i
				if (i == 0) { // 巡查上报

				} else { // 群众投诉、树木倾倒

				}
			},
			detectionClick() {
				this.detectionModel = true
			},
			detectionCloseClick() {
				this.detectionModel = false
				this.detectionTitleTab = 0
				this.detectionSubTitleTab = 0
			},
			detectionTitleClick(i) {
				this.detectionTitleTab = i
				this.detectionSubTitleTab = 0
				if (i == 0) {
					this.detectionSubTitleList = [{
						name: '全部'
					}, {
						name: '温度报警 (0)'
					}, {
						name: '湿度报警 (0)'
					}]
				} else {
					this.detectionSubTitleList = [{
						name: '全部'
					}, {
						name: '其他报警 (0)'
					}]
				}
			},
			detectionSubTitleClick(i) {
				this.detectionSubTitleTab = i
			},
			//园林绿地 名木古树弹框关闭时触发
			onChangeGenDetailVisible(boo) {
				!boo && (this.topTitleTab = -1)
			},
			onClickGenDetailItem(title, type) {
				bus.$emit('onSearchMenuType', {
					title,
					type
				})
			},
			// 点击别处关闭左侧要素弹窗
			handlerCloseGenDetail() {
				this.genDetailVisible = false
			}
		},
	}
</script>

<style lang='scss' scoped>
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/progress";
	@import "@/scss/iviewCssReset/select";

	.left {
		width: 400px;
		position: fixed;
		top: 80px;
		bottom: 0;
		left: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;
		color: #ffffff;

		.left-top {
			.left-top-count {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20px 0;
				position: relative;

				.left-top-count-item {
					font-size: 16px;
					color: #CCCCCC;
					font-weight: 500;
					line-height: 1;
					display: flex;
					/* align-items: center; */
					margin-right: 44px;
					cursor: pointer;

					img {
						width: 50px;
						height: 50px;
						margin-right: 10px;
					}

					.left-top-count-item-text {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.left-top-count-item-text-title {
							display: flex;
							align-items: center;
						}

						.left-top-count-item-text-count {
							color: #FFFFFF;
							font-weight: bold;
						}
					}
				}

				.left-top-count-item:nth-child(2) {
					margin-right: 0;
				}
			}

			/* 左侧标题 点击 显示后的弹框 */
			.left-top-modal {
				/* position: absolute;
        z-index: 600;
        top: 80px;
        left: 0px; */
				width: 360px;
				height: 500px;
				background: rgba(45, 52, 57, 0.95);
				box-shadow: 0px 0px 8px 0px #25bb96;
				border-radius: 8px;

				.left-top-modal-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 16px;
					height: 52px;
					border-radius: 8px 8px 0 0;
					background: #525a60;

					.ivu-dropdown-rel a {
						color: #ffffff;
					}
				}

				.left-top-modal-cont {
					padding: 10px;
					border-top: 1px solid rgba(255, 255, 255, 0.1);
					padding-top: 14px;
					height: 414px;
					overflow: auto;

					.left-top-modal-cont-garden {
						margin-bottom: 25px;
						padding-bottom: 20px;
						border-bottom: 1px solid rgba(255, 255, 255, 0.2);

						.left-top-modal-cont-garden-title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 10px;

							div:first-child {
								cursor: pointer;
							}

							div:last-child {
								height: 26px;
								line-height: 26px;
								border-radius: 4px;
								background: rgba(255, 255, 255, 0.1);
								border: 1px solid rgba(255, 255, 255, 0.4);
								padding: 0 4px;
							}
						}

						.left-top-modal-cont-garden-msg {
							display: flex;
							padding-left: 10px;
							height: 32px;
							line-height: 32px;
							color: #fff;

							div:first-child {
								width: 180px;
							}
						}

						.left-top-modal-cont-garden-name {
							width: 44px;
							height: 26px;
							line-height: 26px;
							color: #fff;
							border-radius: 12px;
							padding: 0 8px;
							margin-right: 6px;
							background: rgba(0, 183, 238, 0.3);
						}
					}

					.left-top-modal-cont-garden:last-child {
						margin-bottom: 0;
					}

					.left-top-modal-cont-tree {
						margin-bottom: 25px;
						padding-bottom: 20px;
						border-bottom: 1px solid rgba(255, 255, 255, 0.2);

						.left-top-modal-cont-tree-title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #fff;
							padding: 0 10px;

							div:first-child {
								cursor: pointer;
							}

							div:last-child {
								height: 26px;
								line-height: 26px;
								border-radius: 4px;
								background: rgba(255, 255, 255, 0.1);
								border: 1px solid rgba(255, 255, 255, 0.4);
								padding: 0 4px;
							}
						}

						.left-top-modal-cont-tree-msg {
							display: flex;
							padding-left: 10px;
							height: 32px;
							line-height: 32px;
							color: #fff;
							justify-content: space-between;

							div:last-child {
								span {
									color: rgb(109, 207, 154);
								}
							}
						}

						.left-top-modal-cont-tree-place {
							color: rgba(255, 255, 255, 0.65);
							padding: 8px 10px;
						}
					}

					.left-top-modal-cont-tree:last-child {
						margin-bottom: 0;
					}
				}
			}

			.left-top-percent {
				font-size: 14px;
				color: #FFFFFF;
				font-weight: bold;
				line-height: 1;
				padding: 0 32px;

				.left-top-percent-percent {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10px;

					.left-top-percent-percent-count {
						font-size: 16px;
					}
				}
			}
		}

		.left-top-percent-area {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			font-size: 16px;

			.left-top-percent-area-item {
				width: 132px;
				height: 60px;
				line-height: 1;
				padding-left: 16px;
				background-image: url(../../../../assets/new/new_tree_bgc.png);
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.left-top-percent-area-item-title {
					font-size: 14px;
					color: #FFFFFF;
					font-weight: 500;
					margin-bottom: 8px;
				}

				.left-top-percent-area-item-count {
					font-size: 16px;
					font-weight: bold;
					color: #02B8FC;

					span {
						margin-left: 5px;
					}
				}
			}

			/* .left-top-percent-area-item:nth-child(2) {
      background-image: url(../../../../assets/main/gardens_bg2.png);
    } */
		}

		.left-bottom {
			padding: 20px 28px 0;
			.left-bottom-status {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left-bottom-status-item {
					width: 134px;
					height: 60px;
					margin-bottom: 20px;
					border-radius: 8px;
					background-color: rgba(185, 190, 193, 0.3);
					line-height: 1;
					padding: 10px 13px;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.left-bottom-status-item-title {
						font-size: 14px;
						color: #FFFFFF;
						font-weight: 500;
					}

					.left-bottom-status-item-count {
						font-size: 20px;
						color: #00BAFF;
						font-weight: bold;
					}

					.left-bottom-status-item-icon {
						position: absolute;
						right: 6px;
						bottom: 6px;
						color: rgba(255, 255, 255, 0.2);
					}
				}

				.left-bottom-status-item-in {
					background: url(../../../../assets/new/tree_num.png) 0 0 no-repeat;
					background-size: 100% 100%;
				}
			}
			.left-bottom-msg::-webkit-scrollbar{
				display: none;
			}
			.left-bottom-msg {
				height: 132px;
				overflow: auto;

				.left-bottom-msg-item {
					/* height: 2.1rem; */
					padding-left: 16px;
					/* display: flex; */
					/* align-items: center; */
					padding: 5px 0 5px 10px;

					.left-bottom-msg-item-time {
						color: #eeeeee;
						margin-right: 30px;
					}

					.left-bottom-msg-item-msg {
						span {
							margin-left: 5px;
						}

						span:nth-child(1) {
							color: rgba(255, 255, 255, 0.8);
						}

						span:nth-child(2) {
							color: #02B8FC;
						}
					}
				}

				.left-bottom-msg-item:nth-child(odd) {
					background: rgba(255, 255, 255, 0.1);
				}
			}
			.left-bottom-img{
				font-size: 14px;
				color: #FFFFFF;
				font-weight: bold;
				display: flex;
				flex-direction: column;
				align-items: center;
				img{
					width: 100px;
					height: 100px;
				}
				p{
					margin-top: 4px;
				}
			}
		}
	}

	.left-top-detail {
		color: rgba(255, 255, 255, 0.45);
		padding: 2px 8px;

		header{
				  width: 372px;
				  height: 90px;
				  font-size: 16px;
				  color: #FFFFFF;
				  background: url(../../../../assets/new/new_img_top.png) 0 0 no-repeat;
				  background-size: 100% 100%;
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				  padding: 30px 34px 0 15px;
				  .left-top-person-name{
					  width: 160px;
					  height: 54px;
					  line-height: 54px;
					  background-image: url(../../../../assets/new/new_light.png);
					  background-size: 100% 100%;
					  padding-left: 31px;
					  font-weight: bold;
					  opacity: .9;
				  }
		}
		.left-top-person-footer{
				  width: 372px;
				  height: 70px;
				  background: url(../../../../assets/new/new_img_bottom.png) 0 0 no-repeat;
				  background-size: 100% 100%;
		}

		.left-top-green {
			section {
				width: 372px;
				background: url(../../../../assets/new/new_img_center.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-wrap: wrap;
				padding-top: 30px;
		
				.left-top-green-item {
					width: 33.33%;
					font-size: 16px;
					color: #CCCCCC;
					font-weight: 500;
					line-height: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;
					
					.left-center-txt{
						margin: 10px 0;
					}
					.left-top-green-item-img {
						width: 50px;
						height: 50px;
					}
		
					.left-top-green-icon {
						padding: 11px;
						background: rgba(46, 190, 154, 0.1);
						border-radius: 50%;
						color: #2ebe9a;
						margin-bottom: 6px;
					}
		
					span {
						font-size: 18px;
						font-weight: bold;
						color: #fff;
					}
				}
			}
		
			.left-top-section1 {
				.left-top-green-item:nth-child(-n+3) {
					margin-bottom: 20px;
				}
			}
		
			.left-top-section2 {
				.left-top-green-item:nth-child(-n+6) {
					margin-bottom: 20px;
				}
			}
		}
	}

	.right {
		position: fixed;
		top: 80px;
		bottom: 0;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.right-cont {
			color: #ffffff;
			.right-cont-top{
				padding: 24px 42px 0;
			}
			.right-cont-top-item {
				font-size: 14px;
				color: #eeeeee;
				font-weight: bold;
				line-height: 1;
				display: flex;
				align-items: center;
				margin-bottom: 18px;
				.right-cont-top-item-txt{
					height: 60px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
			}

			.right-cont-line {
				height: 2px;
				margin: 20px 0 30px 0;
				background: url(../../../../assets/main/com_line2.png);
				background-size: cover;
			}

			.right-cont-record {
				color: #eee;

				.right-cont-record-title {
					font-size: 18px;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 26px;
				}
			}
		}

		.right-bottom {
			color: #ffffff;

			.right-bottom-detection {
				.right-bottom-detection-item {
					display: flex;
					align-items: center;
					margin-bottom: 20px;

					.right-bottom-detection-item-icon {
						display: flex;

						.right-bottom-detection-item-icon-icon {
							width: 64px;
							height: 64px;
							line-height: 64px;
							text-align: center;
							border-radius: 50%;
							border: 1px solid rgba(255, 255, 255, 0.2);
							margin-right: 16px;
						}

						.right-bottom-detection-item-icon-text {
							width: 80px;

							p {
								font-size: 16px;
								margin-bottom: 8px;
							}

							span {
								color: #dcdcdc;
								font-size: 24px;
								font-weight: bold;
							}
						}
					}

					.right-cont-detection-item-line {
						height: 32px;
						width: 1px;
						background: rgba(255, 255, 255, 0.1);
						margin: 0 20px;
					}

					.right-cont-detection-item-data {
						margin-right: 40px;
						width: 50px;

						p {
							font-size: 14px;
							margin-bottom: 8px;
						}

						span {
							color: rgb(109, 207, 154);
							font-size: 24px;
							font-weight: bold;
						}
					}

					.right-cont-detection-item-data:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	.detection-model {
		position: absolute;
		top: 160px;
		left: 50%;
		transform: translate(-50%);
		width: 808px;
		z-index: 500;
		border: 1px solid #000000;
		box-shadow: 0px 1px 8px 0px rgba(24, 200, 157, 0.4);
		border-radius: 4px;
		background: rgba(45, 52, 57, 0.95);

		.detection-model-title {
			display: flex;
			align-items: center;
			height: 42px;
			padding: 6px 8px 0 6px;
			background: #525a60;

			div {
				width: 102px;
				height: 100%;
				line-height: 42px;
				text-align: center;
				color: rgba(255, 255, 255, 0.65);
				font-size: 18px;
				font-weight: 500;
				cursor: pointer;
			}

			.detection-model-title-icon {
				margin-left: auto;
				font-size: 24px;
				color: rgba(255, 255, 255, 0.45);
				cursor: pointer;
			}

			.detection-model-title-title-in {
				background-color: #3c444a;
				border-radius: 2px 2px 0 0;
				color: #ffffff;
			}
		}

		.detection-model-subtitle {
			display: flex;
			align-items: center;
			background-color: #3c444a;
			height: 46px;
			padding: 0 56px 0 30px;

			div {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 26px;
				color: rgba(255, 255, 255, 0.65);
				cursor: pointer;
				border-bottom: 2px solid transparent;
			}

			.detection-model-subtitle-title-in {
				color: #fff;
				border-color: #25bb96;
			}
		}

		.detection-model-data {
			padding-top: 150px;
			height: 570px;
		}
	}

	::v-deep {
		.ivu-progress-inner {
			border: 1px solid rgba(0, 186, 255, .6);
			padding: 0;
		}
		.ivu-modal-content{
			background-color: rgba(0,0,0,0);
			box-shadow: 0 0 5px 0 rgba(0,0,0,0);
			.left-top-detail{
				padding: 0;
			}
			.ivu-modal-body{
				line-height: 1;
				padding: 0;
			}
		}
	}
</style>
